//compass tools
@import "import";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../node_modules/huodh-vue-plugins/dist/css/huodh-vue-plugins.css";

html, body {
  height: 100%;
  position: relative;
}

.head, .footer {
  position: fixed;
  left: 0;
  right: 0;
  background: rgb(27, 43, 51);
  padding: 15px 30px;
  color: white;
  h3 {
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    span.brand {
      color: $brand-primary;
    }

    &:hover {
      span.brand {
        color: $link-hover-color;
      }
    }

  }
  a {
    color: white;
    &:hover {
      color: $link-hover-color;
    }
  }
  div {
    &.pull-left a {
      margin-right: 10px;
    }
  }
}

.head {
  top: 0;
  box-shadow: 0px 5px 5px rgba(27, 43, 51, .8);
}

.footer {
  bottom: 0;
  box-shadow: 0px -3px 5px rgba(27, 43, 51, .6);
}

#index-app {
  position: absolute;
  top: 60px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .left-tree {
    width: 180px;
    height: 100%;
    max-width: 180px;
    float: left;
    overflow-y: auto;
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background: rgba(140, 150, 160, .3);
    }
    &::-webkit-scrollbar {
      width: 10px;
      background: rgba(140, 150, 160, .3);
    }
    &::-webkit-scrollbar-thumb {
      background: #555555;
    }
    background: $base-background;
  }
  .right-content {
    margin-left: 180px;
    padding: 15px 0;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background: rgba(140, 150, 160, .3);
    }
    &::-webkit-scrollbar {
      width: 10px;
      background: rgba(140, 150, 160, .3);
    }
    &::-webkit-scrollbar-thumb {
      background: #555555;
    }
    .panel-sample {
      overflow: hidden;
      .panel-total {
        .panel-wrapper {
          > main {
            padding: 5px 15px;
          }
        }
      }
    }
    .tab-sample {
      .tab-body {
        padding: 5px 15px;
      }
    }
  }
}

// 继续left tree的实现，使用灰度作为边框，
